---
title: Introduction
description: Use Animate UI components to animate your pages.
---

**Animate UI is a distribution of React components** built with [Tailwind CSS](https://tailwindcss.com/) and [Motion](https://motion.dev/), based on the shadcn registry and inspired by [shadcn/ui](https://ui.shadcn.com/) and [Magic UI](https://magicui.design/). Our goal is to help anyone add tasteful, accessible, Motion‑powered animation to their UI while keeping sites fast and maintainable.

## Not a library—an open component distribution

Like [shadcn/ui](https://ui.shadcn.com/), **Animate UI is not a typical install‑from‑NPM library**. It’s an open collection you can **copy, modify, and customize** directly in your codebase. This “open code” approach gives you maximum flexibility without wrapper overhead or styling workarounds.

## What’s included

1. **Primitives (animated)**: Building blocks with animation baked in. Authored by Animate UI or ported from popular primitive libraries (Radix UI, Base UI, Headless UI).
2. **Components**: Essential UI pieces with baseline styles inspired by shadcn/ui, designed to integrate easily into your interfaces and built on the animated primitives.
3. **Icons**: Animated [Lucide](https://lucide.dev/) icons.

## Why Animate UI?

1. **Open source & copy‑first**: Direct access to source so you can adapt components at their core to your design system.
2. **Animation‑first, powered by Motion**: Consistent, composable motion patterns that make interfaces feel modern and engaging.
3. **Performance & accessibility**: Sensible defaults and patterns that keep your site fast by default.
4. **Style‑agnostic**: Not prescriptive about look and feel; baseline styles are minimal and easy to restyle.
5. **Multi‑primitive support**: We aim to support and port components across multiple primitive libraries (Radix UI, Base UI, Headless UI).
6. **Complementary to Magic UI and shadcn/ui**: Works alongside these projects, filling the animation‑focused gap.
